<template>
  <div>
    <div v-if="show === 'form'">
      <el-form :model="deviceForm" :rules="deviceFormRules" ref="deviceForm">
        <el-row style="text-align: left">
          <el-col :span="12">
            <el-form-item prop="name" label="资产名称" label-width="80px">
              <el-input v-model="deviceForm.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="area" label="网络区域" label-width="80px">
              <el-select class="yanseSelect" @click.native="getuArealist()"
                         v-model="deviceForm.area"
                         ref="template1"
                         @change="colorSelectChangeforid"
                         :popper-append-to-body="false"
                         @visible-change="v => visibleChange(v,'template1',  'ship')">
                <el-option v-for="item in arealist" :style="{background:item.yanse}" :key="item._id" :value="item._id"
                           :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="type" label="资产类型" label-width="80px">
          <el-cascader v-model="deviceForm.type" change-on-select :options="typeOptions"
                       :props="{ checkStrictly: true }"
                       @blur='typeBlur' placeholder="选择设备类型" :clearable="true" style="width: 100%"></el-cascader>
        </el-form-item>
        <el-form-item prop="xinhao" label="型号" label-width="80px">
          <el-input v-model="deviceForm.xinhao" clearable></el-input>
        </el-form-item>
        <el-form-item prop="ip" label="IP地址" label-width="80px">
          <div style="text-align: left">
            <el-tag :key="tag" v-for="tag  in deviceForm.ip" closable :disable-transitions="false"
                    @close="handleClose(tag)" style="margin-right: 10px">
              {{tag}}
            </el-tag>
            <el-input v-if="inputVisible" v-model="inputValue" ref="saveIpInput" size="small"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" clearable
                      class="input-new-tag"></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 增加IP</el-button>
          </div>
        </el-form-item>

        <el-form-item prop="user" label="用户名" label-width="80px" style="text-align: left">
          <el-tooltip content="点击编辑" placement="top" :key="index" v-for="(user,index)  in deviceForm.user">
            <el-tag closable :disable-transitions="false"
                    @close="userhandleClose(user)" style="margin-right: 10px" @click="editUser(user)">
              {{user.username}}
            </el-tag>
          </el-tooltip>
          <!--          <el-input v-if="inputVisibleUser" v-model="inputValueUser" ref="saveIpInput" size="small"-->
          <!--                    @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"-->
          <!--                    class="input-new-tag"></el-input>-->


          <el-button class="button-new-tag" size="small" @click="showInputUser">+ 增加用户</el-button>
        </el-form-item>
        <el-form-item prop="remote" label="远程连接" label-width="80px">
          <div style="text-align: left">
            <el-tooltip content="点击编辑" placement="top" :key="tag._id" v-for="tag  in deviceForm.remote">
              <el-tag type="success" closable :disable-transitions="false"
                      @close="removeRemote(tag)" @click="openEditRemote(tag)">
                {{tag.type}}:{{tag.username}}
              </el-tag>
            </el-tooltip>
            <el-button circle type="success" icon="el-icon-plus" size="mini" @click="addRmote"></el-button>
          </div>
        </el-form-item>
        <el-form-item prop="url" label="管理URL" label-width="80px">
          <el-input v-model="deviceForm.url" clearable></el-input>
        </el-form-item>
        <el-form-item prop="version" label="系统版本" label-width="80px">
          <el-input v-model="deviceForm.version" clearable></el-input>
        </el-form-item>
        <el-form-item prop="cgrq" label="采购日期" label-width="80px">
          <el-date-picker
            v-model="deviceForm.cgrq"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="选择日期"
            style="width: 100%" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="parameter" label="配置参数" label-width="80px">
          <el-input type="textarea" autosize :rows="2" v-model="deviceForm.parameter" clearable></el-input>
        </el-form-item>
        <el-form-item prop="beizhu" label="备注说明" label-width="80px">
          <el-input type="textarea" autosize v-model="deviceForm.beizhu" clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="show === 'edit'">
      <el-form :model="deviceForm" :rules="deviceFormRules" ref="deviceForm">
        <el-row style="text-align: left">
          <el-col :span="12">
            <el-form-item prop="name" label="资产名称" label-width="80px">
              <el-input v-model="deviceForm.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="area" label="网络区域" label-width="80px">
              <el-select class="yanseSelect" @click.native="getuArealist()"
                         v-model="deviceForm.area"
                         ref="template1"
                         @change="colorSelectChangeforid"
                         :popper-append-to-body="false"
                         @visible-change="v => visibleChange(v,'template1',  'ship')">
                <el-option v-for="item in arealist" :style="{background:item.yanse}" :key="item._id" :value="item._id"
                           :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="type" label="资产类型" label-width="80px">
          <el-cascader v-model="deviceForm.type" change-on-select :options="typeOptions"
                       :props="{ checkStrictly: true }"
                       @blur='typeBlur' placeholder="选择设备类型" :clearable="true" style="width: 100%"></el-cascader>
        </el-form-item>
        <el-form-item prop="xinhao" label="型号" label-width="80px">
          <el-input v-model="deviceForm.xinhao" clearable></el-input>
        </el-form-item>
        <el-form-item prop="ip" label="IP地址" label-width="80px">
          <div style="text-align: left">
            <el-tag :key="tag" v-for="tag  in deviceForm.ip" closable :disable-transitions="false"
                    @close="handleClose(tag)" style="margin-right: 10px">
              {{tag}}
            </el-tag>
            <el-input v-if="inputVisible" v-model="inputValue" clearable ref="saveIpInput" size="small"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"
                      class="input-new-tag"></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 增加IP</el-button>
          </div>
        </el-form-item>
        <el-form-item prop="user" label="用户名" label-width="80px" style="text-align: left">


          <!--             <el-row  :gutter="10" style="background: #7f828b;padding: 4px;border-radius: 5px;">-->
          <!--            <el-col :span="8">-->
          <!--              <el-input style="position: fixed;bottom: -9999px"></el-input>-->
          <!--              <el-input prefix-icon="el-icon-user" v-model="inputValueUser.username" autocomplete="off"-->
          <!--                        placeholder="用户名"-->
          <!--                        clearable></el-input>-->
          <!--            </el-col>-->
          <!--            <el-col :span="8">-->
          <!--              <el-input type="password" style="position: fixed;bottom: -9999px"></el-input>-->
          <!--              <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="inputValueUser.password"-->
          <!--                        autocomplete="off" show-password-->
          <!--                        clearable></el-input>-->
          <!--            </el-col>-->
          <!--            <el-col :span="2">-->
          <!--              <el-tooltip content="确定" placement="top">-->
          <!--                <el-button type="success" size="mini" icon="el-icon-check" circle-->
          <!--                           @click="handleInputUserConfirm"></el-button>-->
          <!--              </el-tooltip>-->

          <!--            </el-col>-->
          <!--            <el-col :span="2">-->
          <!--              <el-tooltip content="删除" placement="top">-->
          <!--                <el-button size="mini" type="danger" icon="el-icon-delete" circle-->
          <!--                           @click="inputVisibleUser=false"></el-button>-->
          <!--              </el-tooltip>-->
          <!--            </el-col>-->
          <!--            <el-col :span="1">-->
          <!--              <el-tooltip content="取消" placement="top">-->
          <!--                <el-button size="mini" type="info" icon="el-icon-close" circle-->
          <!--                           @click="userInputCancel"></el-button>-->
          <!--              </el-tooltip>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <el-tooltip content="点击编辑" placement="top" v-for="(user,index)  in deviceForm.user">
            <el-tag type="warning" closable
                    :disable-transitions="false"
                    @close="userhandleClose(user)" style="margin-right: 10px" @click="editUser(user)">
              {{user.username}}
            </el-tag>
          </el-tooltip>

          <el-button class="button-new-tag" size="small" @click="showInputUser">+ 增加用户</el-button>
        </el-form-item>
        <el-form-item prop="remote" label="远程连接" label-width="80px">
          <div style="text-align: left">
            <el-tooltip content="点击编辑" placement="top" :key="tag._id" v-for="tag  in deviceForm.remote">
              <el-tag type="success" closable :disable-transitions="false"
                      @close="removeRemote(tag)" @click="openEditRemote(tag)" style="margin-right: 10px">
                {{tag.type}}:{{tag.username}}
              </el-tag>
            </el-tooltip>
            <el-button circle type="success" icon="el-icon-plus" size="mini" @click="addRmote"></el-button>
          </div>
        </el-form-item>
        <el-form-item prop="url" label="管理URL" label-width="80px">
          <el-input v-model="deviceForm.url" clearable></el-input>
        </el-form-item>
        <el-form-item prop="version" label="系统版本" label-width="80px">
          <el-input v-model="deviceForm.version" clearable></el-input>
        </el-form-item>
        <el-form-item prop="cgrq" label="采购日期" label-width="80px">
          <el-date-picker
            v-model="deviceForm.cgrq"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="选择日期"
            style="width: 100%" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="parameter" label="配置参数" label-width="80px">
          <el-input type="textarea" autosize :rows="2" v-model="deviceForm.parameter" clearable></el-input>
        </el-form-item>
        <el-form-item prop="beizhu" label="备注说明" label-width="80px">
          <el-input type="textarea" autosize v-model="deviceForm.beizhu" clearable></el-input>
        </el-form-item>
        <el-form-item prop="files" label="附件文档" label-width="80px">
          <div style="text-align: left">
            <el-upload
              class="upload-demo"
              :headers="headers"
              :action="'/api/device/files/'+deviceForm._id"
              :http-request="fileupload"
              :on-error="onError"
              :on-success="onSuccess"
              :on-progress="uploadOnProgress"
              :data="upfile"
              :before-upload="onBeforeUpload"
              :show-file-list="false">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip"><i class="el-icon-info"></i>上传文件不能超过17M</div>
            </el-upload>
            <el-table :data="deviceForm.files" border stripe :show-header="false" v-if="filesTableVisble">
              <el-table-column prop="fileName" label="文件名称"></el-table-column>
              <el-table-column prop="fileSize" label="文件大小"></el-table-column>
              <el-table-column prop="date" label="上传时间"></el-table-column>
              <el-table-column width="40">
                <template slot-scope="scope">
                  <el-popconfirm title="删除后无法找回，确定要删除吗？"
                                 @confirm="deleteFile(deviceForm._id,scope.row._id,scope.$index)">
                    <el-link slot="reference" :underline="false" type="danger" onClick="event.cancelBubble = true"><i
                      class="el-icon-delete"></i></el-link>
                  </el-popconfirm>

                </template>
              </el-table-column>
            </el-table>
          </div>

        </el-form-item>
      </el-form>
    </div>

    <div v-if="show ==='view'" style="margin: 20px 10px">
      <h1 style="margin-bottom: 20px">{{deviceForm.name}}</h1>
      <div style="margin: 0 20px">
        <div v-if="deviceForm.xinhao" style="text-align: left;">
          <div style="display: flex">
            <span class="label">设备型号:</span> <span>{{deviceForm.xinhao}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.type" style="text-align: left">
          <div style="display: flex">
            <span class="label">设备类型:</span>
            <span v-for="item in deviceForm.type"><el-tag style="margin: 0 5px">{{item}}</el-tag></span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.ip" style="text-align: left">
          <div style="display: flex;align-items: center">
            <span class="label">设备IP:</span> <span style="margin-right: 10px;text-align:center"
                                                   v-for="ip in deviceForm.ip">{{ip}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.user" style="text-align: left">
          <div style="display: flex">
            <span class="label">管理用户:</span>
            <span style="margin-right: 10px;font-weight: bolder" v-for="user in deviceForm.user">
              {{user.username}}
              <el-popover v-if="admin" placement="bottom" title="密码：" width="200" trigger="click"
                          :content="aesUtildecrypt(user.password)">
                <el-link :underline="false" slot="reference"><i class="el-icon-view el-icon--right"></i></el-link>
              </el-popover>
          </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.remote" style="text-align: left">
          <div style="display: flex">
            <span class="label">远程连接:</span>
            <div v-for="remote in deviceForm.remote" style="margin-right: 10px">
              <el-tooltip placement="top">
                <div slot="content">
                  协议：{{remote.type.toUpperCase()}}<br>
                  用户：{{remote.username}}<br>
                  地址：{{remote.host}}<br>
                  端口：{{remote.tcp}}
                </div>
                <el-button type="text" style="text-align: center" @click="clickConnect(remote)">
                  <i style="font-size:30px" class="el-icon-monitor"></i>
                </el-button>
              </el-tooltip>

            </div>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.url" style="text-align: left">
          <div style="display: flex">
            <span class="label">管理URL:</span>
            <el-link type="success" @click="openUrl(deviceForm.url)" style="font-size: medium">{{deviceForm.url}}
            </el-link>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.parameter" style="text-align: left">
          <div style="display: flex">
            <span class="label">设备参数:</span> <span>{{deviceForm.parameter}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.version" style="text-align: left">
          <div style="display: flex">
            <span class="label">系统版本:</span> <span>{{deviceForm.version}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.cgrq" style="text-align: left">
          <div style="display: flex">
            <span class="label">采购日期:</span> <span>{{deviceForm.cgrq}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.beizhu" style="text-align: left">
          <div style="display: flex">
            <span class="label">备注信息:</span> <span>{{deviceForm.beizhu}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.updatedAt" style="text-align: left">
          <div style="display: flex">
            <span class="label">修改时间:</span> <span>{{deviceForm.updatedAt}}</span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-if="deviceForm.files" style="text-align: left">
          <span style="font-weight: bolder;margin: 10px">附件文档:</span>
          <el-progress v-if="downloadFlag" :stroke-width="10" :percentage="downloadPercent"></el-progress>
          <el-table :data="deviceForm.files" border stripe :show-header="false" style="margin-top: 10px">
            <el-table-column prop="fileName" label="文件名称"></el-table-column>
            <el-table-column prop="fileSize" label="文件大小"></el-table-column>
            <el-table-column label="上传时间">
              <template slot-scope="scope">{{new Date(scope.row.date).toLocaleString()}}</template>
            </el-table-column>
            <el-table-column width="40">
              <template slot-scope="scope">
                <el-link :underline="false" type="success" @click="downloadFile(deviceForm._id,scope.row._id)"><i
                  class="el-icon-download"></i></el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>

      <!--      <el-input v-for="(value,key,index) in deviceForm"   :value="value">-->
      <!--        <template slot="prepend">{{key}}</template>-->
      <!--      </el-input>-->
    </div>

    <!--    新建用户弹窗-->
    <el-dialog :visible.sync="userDialogVisible"
               width="30%"
               :modal-append-to-body='false'
               :append-to-body="true">
      <el-form :model="userDialogForm" :rules="userDialogFormRules" ref="userDialogForm">
        <el-form-item prop="username" label="用户名：" label-width="80px">
          <el-input prefix-icon="el-icon-user" v-model="userDialogForm.username" placeholder="用户名"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密 码：" label-width="80px">
          <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="userDialogForm.password"
                    show-password
                    clearable></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="success" size="mini" @click="handleInputUserConfirm">提 交</el-button>
     </span>
    </el-dialog>
    <!--    修改用户弹窗-->
    <el-dialog :visible.sync="userEditVisible"
               title="修改用户信息"
               center
               width="30%"
               :modal-append-to-body='false'
               :append-to-body="true">
      <el-form :model="userDialogForm" :rules="userDialogFormRules" ref="userDialogForm">
        <el-form-item prop="username" label="用户名：" label-width="80px">
          <el-input prefix-icon="el-icon-user" v-model="userDialogForm.username" placeholder="用户名"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密 码：" label-width="80px">
          <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="userDialogForm.password"
                    show-password
                    clearable></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="success" size="mini" @click="editInputUserConfirm">提 交</el-button>
    <el-button size="mini" type="danger" @click="userhandleClose(userDialogForm)">删 除</el-button>
     </span>
    </el-dialog>
    <!--    新建远程连接-->
    <el-dialog :visible.sync="addRemoteVisible"
               title="新建远程连接"
               width="40%"
               center
               :modal-append-to-body='false'
               :append-to-body="true">
      <el-form :model="addRemoteForm" :rules="RemoteFormRules" ref="addRemoteForm">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item prop="type" label="远程协议:" label-width="120px">
              <el-select v-model="addRemoteForm.type" style="width:100%" @change="changeRemoteType">
                <el-option label="远程桌面RDP" value="rdp"></el-option>
                <el-option label="远程桌面VNC" value="vnc"></el-option>
                <el-option label="TELNET" value="telnet"></el-option>
                <el-option label="SSH" value="ssh"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="tcp" label="端口号：" label-width="120px">
              <el-input v-model="addRemoteForm.tcp" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item prop="host" label="IP地址：" label-width="120px">
              <el-select v-model="addRemoteForm.host" style="width:100%">
                <el-option :key="item" v-for="item in deviceForm.ip" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="user" label="登录用户：" label-width="120px">
              <el-select v-model="addRemoteForm.user" style="width:100%" value-key="username">
                <el-option v-for="item in deviceForm.user" :key="item.username" :label="item.username"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <i class="el-icon-info" style="margin-left: 30px"></i> 后期用户名密码将会受到资产信息中的用户信息的连带影响。
      <span slot="footer" class="dialog-footer">
    <el-button type="success" size="mini" @click="addRemoteConnect">提 交</el-button>
    <el-button type="info" size="mini" @click="testConnect('addRemoteForm')">测试连接</el-button>
     </span>
    </el-dialog>
    <!--    修改远程连接-->
    <el-dialog :visible.sync="editRemoteVisible"
               title="编辑远程连接"
               width="40%"
               center
               :modal-append-to-body='false'
               :append-to-body="true"
               @close="resetForm('editRemoteVisible')">
      <el-form :model="editRemoteForm" :rules="RemoteFormRules" ref="editRemoteForm">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item prop="type" label="远程协议:" label-width="120px">
              <el-select v-model="editRemoteForm.type" style="width:100%" @change="changeRemoteType">
                <el-option label="远程桌面RDP" value="rdp"></el-option>
                <el-option label="TELNET" value="telnet"></el-option>
                <el-option label="SSH" value="ssh"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="tcp" label="端口号：" label-width="120px">
              <el-input v-model="editRemoteForm.tcp" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item prop="host" label="IP地址：" label-width="120px">
              <el-select v-model="editRemoteForm.host" style="width:100%">
                <el-option :key="item" v-for="item in deviceForm.ip" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="user" label="登录用户：" label-width="120px">
              <el-select @change="$forceUpdate()" v-model="editRemoteForm.user" style="width:100%" value-key="username">
                <el-option v-for="item in deviceForm.user" :key="item.username" :label="item.username"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <i class="el-icon-info" style="margin-left: 30px"></i> 后期用户名密码将会受到资产信息中的用户信息的连带影响。
      <span slot="footer" class="dialog-footer">
    <el-button type="success" size="mini" @click="editRemoteConnect">提 交</el-button>
    <el-button type="info" size="mini" @click="testConnect('editRemoteForm')">测试连接</el-button>
     </span>
    </el-dialog>
    <!--遮罩层-->
    <div class="loading" v-if="loading">
      <h4 class="tips">{{tips}}</h4>
      <!--进度条-->
      <el-progress type="line" :percentage="progress" class="progress" :show-text="true"></el-progress>
    </div>

    <!--新建网络区域弹框-->
    <el-dialog
      title="新建网络区域"
      :visible.sync="areadialogVisible"
      :modal-append-to-body='false'
      :append-to-body="true"
      ref="areadialog"
      width="30%" @open="openAreaDialog">
      <el-form :model="areaForm" :rules="areaFormRules" ref="areaForm" style="text-align: left">
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="10">
            <el-form-item prop="name">
              <el-input placeholder="区域名称，如：内外、外网" v-model="areaForm.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="yanse">
              <el-select class="yanseSelect" ref="colorSelect" v-model="areaForm.yanse" placeholder="选择标记颜色"
                         @change="colorSelectChange" :popper-append-to-body="false">
                <el-option style="background: #409EFF" value='#409EFF' label="默认(蓝色)"></el-option>
                <el-option style="background: #67CF22" value="#67CF22" label="绿色"></el-option>
                <el-option style="background:#F56C6C" value="#F56C6C" label="红色"></el-option>
                <el-option style="background:#E6A23C" value="#E6A23C" label="黄色"></el-option>
                <el-option style="background:#909399" value="#909399" label="灰色"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="areadialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitAddArea">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
  import CryptoJS from 'crypto-js'

  // 验证IP的正则
  let ip_reg = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  export default {
    props: ['deviceData', 'show', 'arealist'],
    name: "device-detail",
    created() {
      if (this.deviceData) this.deviceForm = this.deviceData
      if (this.$store.state.user.data.result.rank == 1) this.admin = true
    },
    data() {
      return {
        //arealist: [],
        admin: false,
        popovervisible: false,
        currentEidtUser: null, //当前修改的原值
        currentEditRemote: null,//当前修改的原值
        areaForm: {yanse: '#409EFF'},
        userDialogVisible: false,
        addRemoteVisible: false,
        editRemoteVisible: false,
        userEditVisible: false,
        areadialogVisible: false,
        addRemoteForm: {type: '', host: '', tcp: '', user: ''},
        editRemoteForm: {type: '', host: '', tcp: '', user: ''},
        progress: 0,
        downloadPercent: 0,
        downloadFlag: false,
        loading: false,
        tips: '',
        filesTableVisble: true,
        files: [],
        upfile: {fileName: ''},
        headers: {
          Authorization: 'Bearer ' + this.$store.state.user.token
        },
        deviceForm: {},
        deviceFormRules: {
          name: [{required: true, message: '请输入设备名称', trigger: 'blur'}],
          type: [{type: 'array', required: true, message: '请选择设备类型', trigger: 'change'}],
        },
        RemoteFormRules: {
          type: [{required: true, message: '请选择连接协议', trigger: ['change']}],
          tcp: [{required: true, message: '请填写端口号', trigger: 'blur'}],
          host: [{required: true, message: '请选择连接IP', trigger: ['change']}],
          user: [{required: true, message: '请选择连接用户', trigger: ['change']}],
        },
        userDialogFormRules: {
          username: [{required: true, message: '请输入设备名称', trigger: 'blur'}],
          // password:[{required: true, message: '请输入密码', trigger: 'blur'}]
        },
        areaFormRules: {
          name: [{required: true, message: '输入不能为空', trigger: 'blur',},],
          yanse: [{required: true, message: '输入不能为空', trigger: 'blur',},],
        },
        inputVisible: false,
        inputVisibleUser: false,
        inputValue: '',
        userDialogForm: {username: '', password: ''},
        typeOptions: [{
          value: '硬件设备', label: "硬件设备", children: [{
            value: '网络设备', label: "网络设备",
            children: [{value: '交接机', label: "交接机"}, {value: '路由器', label: "路由器"},]
          },
            {
              value: '安全设备', label: "安全设备", children: [
                {value: '防火墙', label: "防火墙"},
                {value: 'IPS', label: "IPS"},
                {value: '防毒墙', label: "防毒墙"},
                {value: 'WAF', label: "WAF"},
                {value: '数据库审计', label: "数据库审计"},
                {value: '日志审计', label: "日志审计"},]
            },

            {value: '服务器', label: "服务器"},
            {
              value: '存储网络',
              label: "存储网络",
              children: [{value: '磁盘阵列柜', label: "磁盘阵列柜"}, {value: '存储光交换机', label: "存储光交换机"}, {
                value: '备份一体机',
                label: "备份一体机"
              },]
            },
            {
              value: '机房设备',
              label: "机房设备",
              children: [{value: '机房空调', label: "机房空调"}, {value: 'UPS主机', label: "UPS主机"}, {
                value: '动环设备',
                label: "动环设备"
              },]
            },]
        },
          {
            value: '软件资产',
            label: "软件资产",
            children: [{value: '虚拟机', label: "虚拟机"}, {value: '数据库', label: "数据库"}, {value: '中间件', label: "中间件"},
              {value: '管理软件', label: "管理软件"}, {value: '安全类软件', label: "安全类软件"}, {value: '业务软件', label: "业务软件"}]
          }],
        UNITS: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        STEP: 1024,
        connectInfo: {
          "connection": {
            "type": '',
            "settings": {
              "hostname": '',
              "port": '',
              "username": '',
              "password": '',
              "enable-drive": true,
              "drive-path": '/tmp',
              "create-drive-path": true,
              "security": "any",
              "ignore-cert": true,
              "enable-wallpaper": false,
              "disable-glyph-caching": true
            }
          }
        },
        abc: null,
      }
    },
    methods: {
      resetForm(formName) {
        //console.log("pppppppppppp")
        //console.log(this.$refs[formName])
        //this.$refs[formName].resetFields()
        //this.$refs[formName].clearValidate()
      },
      changeRemoteType(value) {
        switch (value) {
          case 'rdp':
            this.addRemoteForm.tcp = '3389';
            break;
          case 'vnc':
            this.addRemoteForm.tcp = '5900';
            break;
          case 'ssh':
            this.addRemoteForm.tcp = '22';
            break;
          case 'telnet':
            this.addRemoteForm.tcp = '23';
            break;
        }
      },
      testConnect(formName) {
        this.$refs[formName].validate(async valide => {
          if (valide) {
            this.connectInfo.connection.type = this[formName].type
            this.connectInfo.connection.settings.hostname = this[formName].host
            this.connectInfo.connection.settings.port = this[formName].tcp
            this.connectInfo.connection.settings.username = this[formName].user.username
            this.connectInfo.connection.settings.password = this[formName].user.password
            try {
              await this.$axios.post('/api/remote/getToken', {routeInfo: this.connectInfo}).then(
                (res) => {
                  const {href} = this.$router.resolve({
                    path: '/remote_view',
                    query: {
                      token: res.data.result,
                      title: "远程主机:" + this.connectInfo.connection.settings.hostname,
                    }
                  })
                  window.open(href, '_blank')
                }
              )
            } catch (e) {
              console.log(e)
              this.$message.error('连接失败')
            }
          }
        })
      },
      async clickConnect(remoteInfo) {

        //先判断用户信息是否还在
        let user = this.deviceForm.user.filter(item => {
          if (item.username == remoteInfo.username) return item
        });
        if (user.length == 0) {
          this.$message.error("登录用户：" + remoteInfo.username + "信息丢失,请补录")
          return
        }
        if (user.length > 0) {
          this.connectInfo.connection.type = remoteInfo.type
          this.connectInfo.connection.settings.hostname = remoteInfo.host
          this.connectInfo.connection.settings.port = remoteInfo.tcp
          this.connectInfo.connection.settings.username = user[0].username
          this.connectInfo.connection.settings.password = user[0].password
          try {
            await this.$axios.post('/api/remote/getToken', {routeInfo: this.connectInfo}).then(
              (res) => {
                const {href} = this.$router.resolve({
                  path: '/remote_view',
                  query: {
                    token: res.data.result,
                    title: "远程主机:" + this.connectInfo.connection.settings.hostname,
                  }
                })
                window.open(href, '_blank')
              }
            )
          } catch (e) {
            console.log(e)
            this.$message.error('连接失败')
          }
        }
      },
      addRemoteConnect() {
        this.$refs.addRemoteForm.validate(valide => {
          if (valide) {
            let remote = {
              type: this.addRemoteForm.type,
              tcp: this.addRemoteForm.tcp,
              host: this.addRemoteForm.host,
              username: this.addRemoteForm.user.username
            }
            if (!this.deviceForm.remote) {
              this.deviceForm.remote = []
              this.deviceForm.remote.push(remote);
              this.addRemoteVisible = false
              return;
            }
            //检查是否已经有了
            var user = this.deviceForm.remote.filter(item => {
              if (item.username == remote.username && item.type == remote.type) return item
            })
            if (user.length != 0) {
              this.$message.error("已有" + remote.username + "的" + remote.type + "连接，请勿重复")
              return
            }
            this.deviceForm.remote.push(remote);
            this.addRemoteVisible = false
          }
        })
      },
      removeRemote(value) {
        this.deviceForm.remote.splice(this.deviceForm.remote.indexOf(value), 1);
        this.$forceUpdate();
      },
      openEditRemote(tag) {
        this.editRemoteVisible = true
        this.currentEditRemote = tag;
        this.editRemoteForm = JSON.parse(JSON.stringify(tag));
        let user = this.deviceForm.user.filter(item => {
          if (item.username == this.editRemoteForm.username) return item
        })
        //this.editRemoteForm = tag
        if (user.length != 0) {
          this.editRemoteForm.user = user[0]
          // this.$nextTick(()=>{
          //   console.log(this.$refs.editRemoteForm)
          // })

        } else {
          this.$nextTick(() => {
            this.$refs['editRemoteForm'].fields[3].validateState = 'error'
            this.$refs['editRemoteForm'].fields[3].validateMessage = tag.username + '用户信息已被删除'
          })
          // console.log(this.$refs['editRemoteForm'])
          //this.$refs.editRemoteForm.form.rules.user[0].message = tag.uername+'用户信息已被删除'
          //this.$refs['editRemoteForm'].fields[3].validateState = 'error'
        }
      },

      editRemoteConnect() {
        this.$refs.editRemoteForm.validate(valide => {
          if (valide) {
            // if(!this.deviceForm.remote && this.deviceForm.remote.length > 0 )
            let links = this.deviceForm.remote.filter(item => {
              if ((item != this.currentEditRemote) && (item.username == this.editRemoteForm.user.username && item.type == this.editRemoteForm.type)) {
                return item
              }
            });
            if (links.length > 0) {
              this.$message.error(this.editRemoteForm.user.username + "用户下的" + this.editRemoteForm.type + "连接已存在")
              return
            }
            //合规后修改原来的值
            this.deviceForm.remote.filter(item => {
              if (item == this.currentEditRemote) {
                item.type = this.editRemoteForm.type
                item.tcp = this.editRemoteForm.tcp
                item.host = this.editRemoteForm.host
                item.username = this.editRemoteForm.user.username
              }
            });
            this.editRemoteVisible = false
          }
        })
      },
      // typechange() {
      // },
      //上传附件
      fileupload(params) {
        this.loading = true
        this.tips = '正在上传中。。。';
        const form = new FormData()
        form.append("file", params.file)
        form.append("fileName", params.file.name)
        form.append('fileSize', this.upfile.fileSize)
        this.$axios.post(params.action, form, {
          onUploadProgress: progressEvent => {
            this.loading = true
            this.progress = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
            // params.onProgress({percent: percent})
          }
        }).then(res => {

          if (this.progress === 100) {
            this.progress = 0
          }
          //处理成功情况
          this.loading = false
          params.onSuccess(res.data)
        }).catch(e => {
          params.onError(e)
        })


      },
      //删除附件
      async deleteFile(rowId, fileId, index) {

        const res = await this.$axios.delete('/api/device/files/' + rowId + '/' + fileId)
        if (res.status === 200 && res.data.code === 'success') {
          // this.filesTableVisble = false
          this.deviceForm.files = res.data.result.files
          //
          // this.$nextTick(() => {
          //   this.filesTableVisble = true
          // })
          this.$message.success('已删除！')
        }
      },
      uploadOnProgress(event, file, fileList) {
        // console.log(":on-progress")

        // this.progress = event.perecent  //调用默认的进度条
      },
      onError(err, file, fileList) {
        this.$message.error(err)
      },
      onBeforeUpload(file) {
        //先检查上传文件是否合格
        //const isJPG = file.type === 'image/jpeg';
        const isLt200M = file.size / 1024 / 1024 < 17;
        // if (!isJPG) {
        //   this.$message.error('上传拓扑图只能是 JPG 格式!');
        // }
        if (!isLt200M) {
          this.$message.error('上传文件大小不能超过 17MB!');
        }
        this.upfile.fileName = file.name
        this.upfile.fileSize = this.readFileSizeUnit(file.size)
        return isLt200M;
      },
      onSuccess(reponse, file, fileList) {
        console.log("onsucess")
        if (reponse.code === "ValidationError") {
          this.$message.error("上传失败，文件名已存在")
        }
        if (reponse.code === "success") {
          this.filesTableVisble = false
          this.deviceForm.files = reponse.result.files
          this.$nextTick(() => {
            this.filesTableVisble = true
          })
          this.$message.success('上传成功')

        }

        //刚上传的文件在fileList中的格式不对，需要重要整理
        // const Index = fileList.indexOf(file)
        // fileList[Index].id = file.response.id
        // fileList[Index].url = file.response.file

      },
      //下载附件
      async downloadFile(deviceId, fileId) {
        const file = await this.getDeviceFile(deviceId, fileId,)
        if (file) {
          this.downloadFlag = false
          this.downloadPercent = 0
          let bytes = new Uint8Array(file.file.data)
          let blob = new Blob([bytes], {type: "application/octet-stream"})
          let aLink = document.createElement('a')
          let evt = document.createEvent("HTMLEvents")
          evt.initEvent("click", true, true)//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
          aLink.download = file.fileName;
          aLink.href = URL.createObjectURL(blob);
          aLink.click()
        }

      },
      async getDeviceFile(deviceId, fileId) {
        const res = await this.$axios.get('/api/device/files/' + deviceId + '/' + fileId,
          {
            onDownloadProgress: progressEvent => {
              this.downloadFlag = true
              this.downloadPercent = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
            }
          }).catch(error => {
          this.$message.error(error)
        });

        if (res.status === 200 && res.data.code === 'success') {
          //let bytes= new Uint8Array(res.data.result.file)
          // let storeData=''
          // let len = bytes.byteLength
          // for (let i=0;i<len;i++){
          //   storeData+=String.fromCharCode(bytes[i])
          // }

          return res.data.result
        } else {
          this.$message.error('下载失败')
        }

      },
      openUrl(url) {
        window.open(url)
      },
      //添加失去焦点触发 validateField	对部分表单字段进行校验的方法
      typeBlur() {
        this.$refs.deviceForm.validateField('type')
      },
      validateForm() {
        let flag = null
        this.$refs['deviceForm'].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        })
        return flag
      },
      handleClose(ip) {
        this.deviceForm.ip.splice(this.deviceForm.ip.indexOf(ip), 1);
        this.$forceUpdate();
      },
      userhandleClose(user) {
        this.deviceForm.user.splice(this.deviceForm.user.indexOf(user), 1);
        this.userEditVisible = false
        this.$forceUpdate();
      },
      addRmote() {
        this.addRemoteVisible = true
        this.addRemoteForm = {type: '', host: '', tcp: '', user: ''}
      },
      editUser(user) {
        this.userEditVisible = true
        this.currentEidtUser = user;
        this.userDialogForm = JSON.parse(JSON.stringify(user))
        //进行一次密码解密
        this.userDialogForm.password = this.aesUtildecrypt(this.userDialogForm.password)
        // this.deviceForm.user.splice(this.deviceForm.user.indexOf(user), 1);
        // this.inputValueUser = user
        // this.inputVisibleUser = true
        // this.$forceUpdate();
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveIpInput.$refs.input.focus();
        });
      },
      showInputUser() {
        // this.inputVisibleUser = true;
        this.userDialogVisible = true;
        this.userDialogForm = {}
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          if (!ip_reg.test(inputValue)) {
            this.$message.error("IP地址格式不正确")
            return
          }
          if (this.deviceForm.ip) {
            this.deviceForm.ip.push(inputValue);
          } else {
            this.deviceForm.ip = []
            this.deviceForm.ip.push(inputValue);
          }

        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      //提交用户
      handleInputUserConfirm() {
        this.$refs.userDialogForm.validate(
          valide => {
            if (valide) {
              if (this.deviceForm.user) {
                //查看用户是否已经存在
                var user = this.deviceForm.user.filter(item => {
                  return item.username == this.userDialogForm.username
                })
                if (user.length != 0) {
                  this.$message.error('用户名已经存在')
                  this.$refs['userDialogForm'].fields[0].validateMessage = '用户名已经存在'
                  this.$refs['userDialogForm'].fields[0].validateState = 'error'
                  return
                }
                //进行一次密码加密
                this.userDialogForm.password = this.aesUtilencrypt(this.userDialogForm.password)
                this.deviceForm.user.push(this.userDialogForm);
              } else { //没有数组直接加
                this.deviceForm.user = []
                //进行一次密码加密
                this.userDialogForm.password = this.aesUtilencrypt(this.userDialogForm.password)
                this.deviceForm.user.push(this.userDialogForm);
              }
              this.userDialogVisible = false;

            }
          }
        )
        // let inputValue = this.userDialogForm;
        // if (inputValue) {
        //   if (this.deviceForm.user) {
        //     this.deviceForm.user.push(inputValue);
        //   } else {
        //     this.deviceForm.user = []
        //     this.deviceForm.user.push(inputValue);
        //   }
        //
        // }
        // this.inputVisibleUser = false;
        // this.inputValueUser = {username: '', password: ''};
      },
      //修改用户
      editInputUserConfirm() {
        this.$refs.userDialogForm.validate(
          valide => {
            if (valide) {
              let user = this.deviceForm.user.filter(item => {
                if ((item.username == this.userDialogForm.username) && (item != this.currentEidtUser)) {
                  return item
                }
                //if(item == this.currentEidtUser) console.log("shi=")
              })
              if (user.length > 0) { //有两个相同的用户名了
                this.$refs['userDialogForm'].fields[0].validateMessage = '用户名已经存在'
                this.$refs['userDialogForm'].fields[0].validateState = 'error'
                return
              }
              this.deviceForm.user.filter(item => {
                if (item == this.currentEidtUser) {
                  item.username = this.userDialogForm.username
                  //进行一次密码加密
                  this.userDialogForm.password = this.aesUtilencrypt(this.userDialogForm.password)
                  item.password = this.userDialogForm.password
                }
                // console.log(item)
                // console.log(this.currentEidtUser)
                // if (item == this.currentEidtUser) item = this.userDialogForm
              });
              this.userEditVisible = false
            }
          }
        )
      },
      userInputCancel() {
        this.inputVisibleUser = false;
      },
      format: function format(value, power) {
        return (value / Math.pow(this.STEP, power)).toFixed(2) + this.UNITS[power];
      },
      readFileSizeUnit: function (value) {
        value = parseFloat(value, 10);
        for (var i = 0; i < this.UNITS.length; i++) {
          if (value < Math.pow(this.STEP, i)) {
            if (this.UNITS[i - 1]) {
              return this.format(value, i - 1);
            }
            return value + this.UNITS[i];
          }
        }
        return this.format(value, i - 1);
      },
      async getuArealist() {
        const res = await this.$axios.get('/api/iparea').catch(eror => {
          this.$message.error(eror)
        })
        if (res.status === 200 && res.data.code === 'success') {
          this.arealist = res.data.result
        }
      },
      //设置颜色选择框中颜色
      setSelectColor(color, ref) {
        //通过操作dom节点改变样式
        this.$nextTick(() => {
          //let dom = this.$refs.colorSelect;
          let dom = this.$refs[ref];
          if (dom) {
            dom = dom.$el.children[0];
            let inputDom = dom.querySelectorAll(".el-input__inner");
            let icon = dom.querySelectorAll(".el-input__icon");
            inputDom[0].style["background-color"] = color;
            icon[0].style["color"] = "black";
          }
        })
      },
      colorSelectChange(val) {

        this.setSelectColor(val, 'colorSelect');
        //触发update事件更新父组件绑定值
        this.$emit('update', val);
      },
      colorSelectChangeforid(val) {
        let item = this.arealist.find(item => item._id === val)
        this.setSelectColor(item.yanse, 'template1');
        //触发update事件更新父组件绑定值
        this.$emit('update', item.yanse);
      },
      visibleChange(visible, refName, type) {
        if (visible) {
          const ref = this.$refs[refName]
          let popper = ref.$refs.popper
          if (popper.$el) popper = popper.$el
          if (!Array.from(popper.children).some(v => v.className === 'el-template-menu__list')) {
            const el = document.createElement('ul')
            el.className = 'el-template-menu__list'
            el.style = 'border-top:2px solid rgb(219 225 241); padding:0; color:rgb(64 158 255);font-size: 13px'
            el.innerHTML = `<li class="el-cascader-node text-center" style="height:37px;line-height: 50px">
                <span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i> 新建网络区域</span>
                </li>`
            popper.appendChild(el)
            el.onclick = () => {
              if (type === "Ship") {
                // this.showShipTemplate(null, false)
              } else {
                this.areadialogVisible = true
                // this.showReturnTemplate(null, false)
              }
              if (ref.toggleDropDownVisible) {
                ref.toggleDropDownVisible(false)
              } else {
                ref.visible = false
              }
            }
          }
        }
      },

      openAreaDialog() {
        this.areaForm = {yanse: '#409EFF'};
        this.setSelectColor(this.areaForm.yanse);
      },
      //提交网络区域标签
      submitAddArea() {
        this.$refs.areaForm.validate(
          async valid => {
            if (valid) {
              const res = await this.$axios.post('/api/iparea', this.areaForm)
              if (res.status === 200 && res.data.code === "ValidationError") {
                this.$message.error("名称重复")
              }
              if (res.status === 200 && res.data.code === "success") {
                this.$message.success("提交成功")
                this.areadialogVisible = false
              }
            }
          }
        )
      },
      // 加密函數
      aesUtilencrypt(word) {
        if (word instanceof Object) {
          //JSON.stringify
          word = JSON.stringify(word)
        }
        const key = CryptoJS.enc.Utf8.parse('bhyh123456789123')
        const ivHex = CryptoJS.enc.Utf8.parse("ahyh123456789123") // 偏移量
        var encryptedObj = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(word), key,
          {
            iv: ivHex,
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7,
          },
        )
        return encryptedObj.ciphertext.toString()
      },
      aesUtildecrypt(word) {
        const key = CryptoJS.enc.Utf8.parse('bhyh123456789123')
        const ivHex = CryptoJS.enc.Utf8.parse("ahyh123456789123")
        var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
        var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        var decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
          iv: ivHex,
          mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
        });
        return decryptedData.toString(CryptoJS.enc.Utf8);


        // let decrypt = CryptoJS.AES.decrypt(word, key,
        //   {
        //     mode: CryptoJS.mode.ECB,
        //     padding: CryptoJS.pad.ZeroPadding,
        //     //padding: CryptoJS.pad.Pkcs7,
        //   },
        // )
        // let decString = CryptoJS.enc.Utf8.stringify(decrypt).toString();
        // return decString
      },
    },
    watch: {
      deviceData(n, o) { //n为新值,o为旧值;
        this.deviceForm = n;
        // console.log("触发更新子组件")
      }
    },

  }
</script>

<style lang="less" scoped>
  .label {
    font-weight: bold;
    width: 80px;
    margin-right: 20px;
    text-align: right;
    display: inline-block;
    align-self: center;
    flex-shrink: 0;
  }

  .el-tag + .el-tag {
    margin-right: 10px;
  }

  .button-new-tag {
    margin-right: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .upload-demo {
    /*display: flex;*/

    /deep/ .el-upload--text {
      margin-right: 20px;
    }

    /deep/ .el-upload-list--text {

    }
  }

  .el-upload__tip {
    display: inline-block;
  }

  .loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.8;
  }

  .progress {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
  }

  .tips {
    color: #409eff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -150px;
  }

  .yanseSelect {
    color: white;
    width: 100%;

    /deep/ .el-select-dropdown__item.selected {
      color: white;
    }
  }
</style>
